<template>
    <div >
        <slot :list="history.list" :remove="removeHistory" :clear="clearHistory">
            <template v-if="history.list.length > 0" class="history-default">
                <div v-for="(item, index) in history.list"  :key="item.path" >
                    <routeItem v-if="item.name" @remove="removeHistory(index)" :item="item"></routeItem>
                </div>
            </template>
        </slot>
    </div>
</template>

<script setup>
import { getCurrentInstance, watch, ref, reactive, onMounted, computed } from 'vue';
import routeItem from './routeItem.vue';

let global = ref({})

let history = ref({
    list: []
})
watch(() => global.value, (val) => {
    history.value.list = val?.$history ? [...val.$history.list] : []
}, {
    deep: true
})
onMounted(() => {
    global.value = getCurrentInstance().appContext.app.config.globalProperties
})

const removeHistory = (index) => {
    global.value.$history.remove(index)
    history.value.list = [...global.value.$history.list]
}

const clearHistory = () => {
    global.value.$history.clear()
    history.value.list = [...global.value.$history.list]
}
</script>

<style scoped>
.history-default {
    display: flex;
    align-items: center;
}
</style> 